<template>
  <div id="app">
    <el-row>
      <el-col :span="10" :xs="24">
        <div class="right">
          <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="top">
            <h3>手机号</h3>
            <el-form-item>
              <el-input v-model="loginForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <h3>密码</h3>
            <el-form-item>
              <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="display: flex;justify-content: center;">
              <el-button type="primary" style="margin: 0 5px;" @click="handleLogin">登录</el-button>
              <el-button style="margin: 0 5px;" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="14" :xs="24">
        <div class="grid-content">
          <div class="title-div">
            <div class="maintitle">
              <h1>享受静谧时光</h1>
              <h1>体验星际服务🌼</h1>
            </div>
            <div class="subtitle">
              <h3>美容沙龙预约管理系统🥯</h3>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

// axios.interceptors.request.use(config => {
//   const token = localStorage.getItem('token');
//   if (token) {
//     config.headers.Authorization = `Bearer ${token}`;
//   }
//   return config;
// });

export default {
  data() {
    return {
      loginForm: {
        phone: '',
        password: ''
      }
    }
  },
  mounted() {

  },
  methods: {
    //登录
    handleLogin() {
      try {
        axios.post('http://localhost:8080/user/login/admin', {
          phone: this.loginForm.phone,
          password: this.loginForm.password
        }, {
          withCredentials: true
        }).then(response => {
          const responseData = response.data;
          console.log(responseData);
          if (responseData.code === 1) {
            console.log('登录成功');
            // 登录成功后将 token 存储在 localStorage 中
            // localStorage.setItem('token', responseData.data.token);
            this.$message('欢迎您！' + responseData.data);
            this.$router.push('/home');
          } else {
            console.error('登录失败：', responseData);
            this.$message.error(responseData.msg);
          }
        });
      } catch (error) {
        console.error('服务出错！', error);
      }
    },

    //注册
    register() {
      this.$message.error("抱歉，暂时无法注册");
    }
  }
}
</script>

<style scoped>
.right {
  height: 77vh;
  padding-top: 25%;
  background: url("../assets/img/login_bg.png") center no-repeat;
  background-size: cover; /* 保证图片覆盖整个元素，且保持宽高比 */
}

.title-div {
  margin: 25% 10%;

  .maintitle {
    font-size: 2em;
    letter-spacing: 2px; /* 设置字母间距为2像素 */
  }

  .subtitle {
    font-size: 1em;
    letter-spacing: 8px; /* 设置字母间距为2像素 */
  }
}

.login-form {
  margin: auto 10%;

  padding: 20px;
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>